<template>
  <Header @tabIndexChange=""></Header>
  <div class="flex-column-center">
    <div class="flex-between" style="width: 1180px;margin-top: 20px;">
      <div style="padding-right: 30px;">
        <div class="menu-header flex-all-center">
          <span class="color-white font-large font-bold" style="padding-bottom: 10px;">栏目导航</span>
        </div>
        <div class="menu-item flex-middle" v-for="(item, index) in data.tabList" :key="item.id"
             :class="{ 'menu-active': index === data.tabIndex  }" @click="menuClickHandle(item, index)">
          {{ item.title }}
        </div>
      </div>
      <div style="max-width: 890px;">
        <Detail :articleInfo="data.articleInfo||data.content"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onBeforeMount, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import Header from "../component/header.vue";
import Detail from '../article/component/detail.vue'
import {getArticleInfo, listArticle, listArticleByIntentExam} from '../../api/home.js'

const router = useRouter();
const route = useRoute();

const data = reactive({
  tabList: [{id: 1,title: '用户协议',},{id: 2,title: '隐私政策',}],
  tabIndex: '',
  articleId: '',
  articleInfo: {
    id: '',
    title: '',
    catalogName: '',
    courseTypeId: '',
    courseTypeName: '',
    publishTime: '',
    originSource: '',
    readAmount: '',
    digest: '',
    content: ''
  }
});

const initData = () => {
  data.articleId = route.query.id
  getArticleInfo(data.articleId, (res) => {
    Object.keys(data.articleInfo).forEach((key) => {
      data.articleInfo[`${key}`] = res.data[`${key}`]
    })
  })
  ListArticleByCatalogName('用户协议')
}

function ListArticleByCatalogName(name) {
  let dataForm = {
    catalogCode: 'YONGHUXIEYI',
    intentionalExamFlag: 0,
  }
  listArticleByIntentExam(dataForm, (res) => {
    data.tabList = res.data
    data.tabIndex = res.data.findIndex((item) => route.query.id === String(item.id))
    data.articleInfo = res.data.find(item => item.id == route.query.id)
  })
}

function menuClickHandle(item, index) {
  if (item.id) {
    data.tabIndex = index
    data.articleId = item.id
    data.articleInfo = item
  }
}
onBeforeMount(() => {
  initData()
})

</script>

<style scoped>
.menu-header {
  width: 280px;
  height: 70px;
  background-image: url("../../assets/images/home/tab-header.png");
}

.menu-item {
  width: 280px;
  height: 54px;
  border-left: 13px solid #04addb;
  font-size: 18px;
  background-color: #EDF0F2;
  margin-top: 10px;
  padding-left: 20px;
  cursor: pointer;
  box-sizing: border-box;
}

.menu-active,
.menu-item:hover {
  border: 2px solid #04addb;
  color: #04addb;
}
</style>
